<template>

	<view class="top">
		<input type="text" v-model="key" confirm-type='完成' @input="myinput" @confirm="myconfirm" />
		<icon class="mysearch" type="search" size="14"></icon>
		<icon @click="clear" v-if="key.length !== 0" class="myclear" type="clear" size="14"></icon>
	</view>

</template>

<script>
	export default {
		name: 'searchs',
		props: ['mykey'],
		data() {
			return {
				key: this.mykey
			};
		},
		watch: {
			mykey() {
				this.key = this.mykey
			}
		},
		methods: {
			// 在子组件中的输入框中输入内容时会触发
			myinput() {
				// 调用父组件中的方法，完成输入框内容时的逻辑操作
				this.$emit('sonInput', this.key)
			},
			// 在子组件中的输入框中点击回车时会触发的事件
			myconfirm() {
				// 调用父组件中的方法，完成搜索
				this.$emit('sonComfirm', this.key)
			},
			clear() {
				// 清除输入框中的内容
				this.key = ''
			},
		}
	}
</script>

<style lang="less" scoped>
	.top {
		background-color: #eeeeee;
		padding: 30rpx 16rpx;
		position: relative;

		input {
			height: 60rpx;
			background-color: #fff;
			padding-left: 70rpx;
		}

		.mysearch {
			position: absolute;
			top: 50%;
			left: 46rpx;
			transform: translateY(-50%);
		}

		.myclear {
			position: absolute;
			top: 50%;
			right: 46rpx;
			transform: translateY(-50%);
			z-index: 999;
		}
	}
</style>
